<template>
  <div>
    <p>{{content}}</p>
    <component :is="childType"></component>
    <button @click="changeType">change</button>
    <!-- <childOne v-if="childType === 'childOne'"></childOne>
    <childTwo v-if="childType === 'childTwo'"></childTwo> -->
  </div>
</template>
<script>
import childOne from './child-one';
import childTwo from './child-two';
export default {
  props: {
    content: {
        type: [String, Number],
        required: false,
        default: 'DEFAULT VALUE'
        // validator: function (value) {
        //    return value.length > 5;
        // }
    }
  },
  components: {
    childOne,
    childTwo
  },
  data: function () {
    return {
      childType: 'childOne'
    };
  },
  methods: {
    changeType: function () {
      this.childType = this.childType === 'childOne' ? 'childTwo' : 'childOne';
    }
  }
};
</script>
